<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 36rpx 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;">
				達人分類
			</view>
			<view :class="{'btn-save':list_active.length==0,'btn-save-active':list_active.length!=0}" @click="savaChange">
				儲存
			</view>
		</view>
		<view style="margin-top: 50rpx; padding:0 36rpx;" v-if="list_active.length > 0">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="color: #232426;font-size: 32rpx;font-weight: 500;">已選擇</view>
					<view style="color:#808690;font-size: 22rpx;margin-left: 18rpx;">目前任務分類</view>
				</view>
				<view @click="cleanList">
					<u-image
						src="/static/images/icon/trash.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			
			<view class="filter-list">
				<view class="item-active" v-for="(item, index) in list_active" :key="index" @click="removeList(item.id)">
					 <u-icon name="minus" size="22" :bold="true" color="#1AAEC0" style="margin-right: 8rpx;"></u-icon>
					 {{item.title}}
				</view>
			</view>
		</view>
		<view style="margin-top: 50rpx; padding:0 36rpx;">
			<view style="display: flex;justify-content: flex-start;align-items: center;">
				<view style="color: #232426;font-size: 32rpx;font-weight: 500;">達人分類</view>
				<view style="color:#808690;font-size: 22rpx;margin-left: 18rpx;">點擊新增</view>
			</view>
			
			<view class="filter-list">
				<view class="item" v-for="(item, index) in list" :key="index" @click="addList(item)">
					{{item.title}}
				</view>
			</view>
		</view>
		
		<custom-toast ref="toast" :title="toastMessage" image="/static/images/icon/success-circle.png" position="center" />
		<u-modal :show="showModal" title="添加失敗"  confirmText="確認" confirmColor="#27C5D6" width="500rpx" @confirm="showModal=false">
			<view class="u-flex u-row-center u-col-center"> 
			    <text>{{toastMessage}}</text>
			  </view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxCount: 10, // 设置最大选择数量
				toastMessage:'',
				showModal:false,
				list:[
					{id:1, title:'形象管理'},
					{id:2, title:'寵物照護'},
					{id:3, title:'陪伴'},
					{id:4, title:'旅遊觀光'},
					{id:5, title:'藝術'},
					{id:6, title:'心靈照護'},
					{id:7, title:'身體調理'},
					{id:8, title:'居家照護'},
					{id:9, title:'家教'},
					{id:10, title:'其他'}
				],
				list_active:[],
				currentTagsFromIndex: [] // 从首页传递过来的当前标签
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听首页发送的当前标签数据
			eventChannel.on('sendCurrentTags', (data) => {
				console.log('接收首页标签数据:', data.currentTags);
				if (data.currentTags && data.currentTags.length > 0) {
					this.list_active = data.currentTags;
				}
				if (data.maxCount && data.maxCount > 0) {
					this.maxCount = data.maxCount;
				}
			});
		},
		methods: {
			addList(tagItem){
				if( this.list_active.length >= this.maxCount ){
					this.toastMessage = '分類只能選'+this.maxCount+'個';
					this.showModal = true;
					return;
				}
				
				// 检查是否已经存在
				const exists = this.list_active.find(item => item.id === tagItem.id);
				if (!exists) {
					this.list_active.push(tagItem);
				}
			},
			
			removeList(id){
				const index = this.list_active.findIndex(item => item.id === id);
				if (index > -1) {
				  this.list_active.splice(index, 1); 
				}
			},
			
			cleanList(){
				this.list_active = [];
			},
			
			savaChange(){
				const eventChannel = this.getOpenerEventChannel();
				// 发送用户选择的标签数据回首页
				eventChannel.emit('acceptDataFromFilter', { 
					selectedTags: this.list_active 
				});
				uni.navigateBack();
			},
			
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		
		.btn-save{
			color: #808690;
			font-size: 32rpx;
			font-weight:400;
		}
		.btn-save-active{
			color: #1AAEC0;
			font-size: 32rpx;
			font-weight:400;
		}
		
		.filter-list{
			margin-top: 50rpx;
			display: flex;
			flex-wrap: wrap;
			
			.item-active{
				font-size: 28rpx;
				color: #1AAEC0;
				border: 2rpx solid #1AAEC0;
				border-radius: 200rpx;
				padding: 12rpx 26rpx;
				margin-bottom: 24rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
			}
			
			.item{
				font-size: 28rpx;
				color: #232426;
				border: 2rpx solid #E5E6E8;
				border-radius: 200rpx;
				padding: 12rpx 26rpx;
				margin-bottom: 24rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>